<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Axis4 - Service Monitor</title>
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery-ui.custom.css" rel="stylesheet" type="text/css" />
    <style>
        .service-row { height: auto; overflow: hidden; }
        .service-row:hover { background-color: #eee; }
        .service-cell { float: left; margin: 10px; }
    </style>
    <script src="script/jquery.js" type="text/javascript"></script>
    <script src="script/jquery-ui.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var axis4 = {
            sm: {
                request: {
                    request: function(request, reader, callback, callbackObj, errorCallback) {
                        if (typeof errorCallback != "function") {
                            errorCallback = function(data) {
                                if (console) {
                                    console.error(data);
                                }
                            };
                        }
                        request.
                            success(function(data) {
                                data = reader(data);
                                if (data.success) {
                                    callback.call(callbackObj, data.data);
                                } else {
                                    errorCallback.call(callbackObj, data.data);
                                }
                            }).
                            error(function(data) {
                                errorCallback.call(callbackObj, data);
                            });
                    },
                    get: function(url, params, callback, callbackObj, errorCallback) {
                        axis4.sm.request.request($.getJSON(url, params),
                                                function(data) { return data; },
                                                callback,
                                                callbackObj,
                                                errorCallback);
                    },
                    post: function(url, params, postParams, callback, callbackObj, errorCallback) {
                        if (typeof params != "undefined") {
                            $.each(params, function(key, val) {
                                if (url.indexOf("?") < 0) {
                                    url += "?";
                                } else {
                                    url += "&";
                                }
                                url += encodeURIComponent(key) + "=" + encodeURIComponent(val);
                            });
                        }
                        axis4.sm.request.request($.post(url, postParams),
                                                function(data) { return $.parseJSON(data); },
                                                callback,
                                                callbackObj,
                                                errorCallback);
                    }
                },
                api: {
                    check: {
                        list: function(callback, callbackObj, errorCallback) {
                            axis4.sm.request.get("api/1/check/list", undefined, callback, callbackObj, errorCallback);
                        }
                    },
                    service: {
                        list: function(callback, callbackObj, errorCallback) {
                            axis4.sm.request.get("api/1/service/list", undefined, callback, callbackObj, errorCallback);
                        },
                        list_checks: function(serviceId, callback, callbackObj, errorCallback) {
                            axis4.sm.request.get("api/1/service/list_checks/" + serviceId, undefined, callback, callbackObj, errorCallback);
                        },
                        add: function(name, url, checks, callback, callbackObj, errorCallback) {
                            axis4.sm.request.post("api/1/service/add", undefined, {name: name, url: url, checks: checks}, callback, callbackObj, errorCallback);
                        },
                        remove: function(serviceId, callback, callbackObj, errorCallback) {
                            axis4.sm.request.post("api/1/service/delete", undefined, {service: serviceId}, callback, callbackObj, errorCallback);
                        },
                        edit: function(serviceId, name, url, checks, callback, callbackObj, errorCallback) {
                            axis4.sm.request.post("api/1/service/edit", undefined, {service: serviceId, name: name, url: url, checks: checks}, callback, callbackObj, errorCallback);
                        }
                    }
                },
                view: {
                    drawServiceRow: function(service) {
                        var row = $("<div class='service-row' style='cursor:pointer'>");
                        row.append("<div class='service-cell'>" + service.name + "</div>");
                        row.append("<div class='service-cell'>" + (service.status && typeof service.status.status != "undefined" ? service.status.status + ": " + service.status.status_text : "-") + "</div>");
                        row.append("<div class='service-cell'>" + (service.status && typeof service.status.status != "undefined" ? new Date((service.status.when - 0) * 1000) : "never") + "</div>");
                        row.click(function() {
                            axis4.sm.controller.services.showHistoryDialog(service);
                        });
                        var d = $("<div>");
                        d.append(axis4.sm.view.drawDeleteButton(service));
                        row.append(d);
                        return row;
                    },
                    drawServiceCheck: function(check) {
                        var c = $("<div class='service-history-check'>");
                        c.append("<span>" + check.check_type.name + "</span>");
                        if (check.history) {
                            $.each(check.history, function(k, row) {
                                var d = $("<div class='service-history-row'>");
                                d.append("<div class='service-history-cell'>" + (typeof row.status != "undefined" ? row.status + ": " + row.status_text : "-") + "</div>");
                                d.append("<div class='service-history-cell'>" + (typeof row.status != "undefined" ? new Date((row.when - 0) * 1000) : "never") + "</div>");
                                c.append(d);
                            });
                        }
                        return c;
                    },
                    drawAddButton: function() {
                        var b = $("<a class='service-add' href='javascript:;'>");
                        b.html("Add");
                        b.click(function() {
                            axis4.sm.controller.services.showAddDialog();
                        });
                        return b;
                    },
                    drawDeleteButton: function(service) {
                        var b = $("<a class='service-delete' href='javascript:;'>");
                        b.html("Delete");
                        b.click(function() {
                            axis4.sm.controller.services.deleteService(service);
                        });
                        return b;
                    }
                },
                controller: {
                    services: {
                        container: undefined,
                        showServices: function(container) {
                            axis4.sm.controller.services.container = container;
                            axis4.sm.api.service.list(function(services) {
                                axis4.sm.controller.services.container.children().remove();
                                $.each(services, function(i, service) {
                                    service.__dom_row__ = axis4.sm.view.drawServiceRow(service);
                                    axis4.sm.controller.services.container.append(service.__dom_row__);
                                });
                                axis4.sm.controller.services.container.append(axis4.sm.view.drawAddButton());
                            }, undefined, function(error) {
                                axis4.sm.controller.services.container.html(error);
                            });
                        },
                        addService: function(service) {
                            axis4.sm.api.service.add(service.name, service.url, service.checks, function(service) {
                                var cs = axis4.sm.controller.services.container.children();
                                $(cs[cs.length - 1]).before(axis4.sm.view.drawServiceRow(service));
                            }, undefined, undefined);
                        },
                        deleteService: function(service) {
                            axis4.sm.api.service.remove(service.id, function() {
                                service.__dom_row__.remove();
                            }, undefined, undefined);
                        },
                        showCheckTypeSelect: function(callback) {
                            axis4.sm.api.check.list(function(checkTypes) {
                                var checks = $("<select class='service-check-types' multiple>");
                                $.each(checkTypes, function(i, checkType) {
                                    checks.append("<option value='" + checkType.id + "'>" + checkType.name + "</option>");
                                });
                                callback(checks);
                            }, undefined, undefined);
                        },
                        showAddDialog: function() {
                            axis4.sm.controller.services.showCheckTypeSelect(function(checks) {
                                var dialog = $("<div class='service-add-form'>");
                                dialog.append("<span>Name</span>");
                                var name = $("<input type='text'>");
                                dialog.append(name);
                                dialog.append("<span>URL</span>");
                                var url = $("<input type='text'>");
                                dialog.append(url);
                                dialog.append("<span>Check Types</span>");
                                dialog.append(checks);
                                $("#page").append(dialog);
                                dialog.dialog({
                                    modal: true,
                                    buttons: {
                                        "Add service": function() {
                                            var service = {
                                                name: name.val(),
                                                url: url.val(),
                                                checks: checks.val().join(",")
                                            };
                                            axis4.sm.controller.services.addService(service);
                                            $(this).dialog("close");
                                        },
                                        Cancel: function() {
                                            $(this).dialog("close");
                                        }
                                    },
                                    close: function() {
                                        $(this).remove();
                                    }
                                });
                            });
                        },
                        showHistoryDialog: function(service) {
                            axis4.sm.api.service.list_checks(service.id, function(checks) {
                                var dialog = $("<div class='service-history' style='overflow:auto;height:600px;width:800px;'>");
                                $.each(checks, function(i, check) {
                                    dialog.append(axis4.sm.view.drawServiceCheck(check));
                                });
                                $("#page").append(dialog);
                                dialog.dialog({
                                    modal: true,
                                    width: 800,
                                    height: 600,
                                    close: function() {
                                        $(this).remove();
                                    }
                                });
                            }, undefined, undefined);
                        }
                    }
                }
            }
        };
        $(function() {
            axis4.sm.controller.services.showServices($("#content"));
        });
    </script>
</head>
<body>
    <div id="page">
        <div id="about"></div>
        <div id="content"><span>Loading...</span></div>
        <div id="footer"></div>
    </div>
</body>
</html>